<template>
  <div class="air_search_form">
    <div class="air_search_form_title">
      <div
        :class="[
          'air_search_form_title_item',
          activIndex === index && 'active',
        ]"
        v-for="(item, index) in titles"
        :key="index"
        @click="activIndex = index"
      >
        <i :class="item.icon"></i>
        {{ item.name }}
      </div>
    </div>
    <div class="air_search_form_content">
      <span class="exchange" @click="exchange">换</span>
      <el-form label-width="80px">
        <el-form-item label="出发城市">
          <el-autocomplete
            v-model="form.departCity"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入内容"
            :trigger-on-focus="false"
            @select="startSelect"
          ></el-autocomplete>
        </el-form-item>
        <el-form-item label="到达城市">
          <el-autocomplete
            v-model="form.destCity"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入内容"
            :trigger-on-focus="false"
            @select="arriveSelect"
          ></el-autocomplete>
        </el-form-item>
        <el-form-item label="选择时间">
          <el-date-picker
            v-model="form.departDate"
            type="date"
            placeholder="选择日期"
            class="date_picker"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="">
          <el-button
            class="search_btn"
            @click="searchAir"
            type="primary"
            icon="el-icon-search"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      titles: [
        {
          name: "单程",
          icon: "iconfont icondancheng",
        },
        {
          name: "往返",
          icon: "iconfont iconshuangxiang",
        },
      ],
      activIndex: 0,
      form: {
        // 出发城市
        departCity: "",
        // 出发城市代码
        departCode: "",
        // 目标城市
        destCity: "",
        // 目标城市代码
        destCode: "",
        // 日期 2019-05-01
        departDate: "",
      },
      // 设置日期
      pickerOptions: {
        disabledDate(date) {
          // console.log(date);
          const time = +date;
          const oneTime = 24 * 60 * 60 * 1000;

          return time + oneTime < Date.now();
        },
      },
    };
  },
  methods: {
    //   开始搜索远程服务器的数据
    async querySearchAsync(queryString, cb) {
      // queryString 输入框的值
      // cd=>callback 回调函数
      const res = await this.$axios.get("/airs/city", {
        params: { name: queryString },
      });
      console.log(res);
      cb(res.data.map((v) => ({ ...v, value: v.name.replace("市", "") })));
    },
    // 选择出发城市编码点击事件
    startSelect(item) {
      this.form.departCode = item.sort;
    },
    // 目标城市编码
    arriveSelect(item) {
      this.form.destCode = item.sort;
    },
    
    // 点击换事件
    exchange() {
      [
        this.form.departCity,
        this.form.departCode,
        this.form.destCity,
        this.form.destCode,
      ] = [
        this.form.destCity,
        this.form.destCode,
        this.form.departCity,
        this.form.departCode,
      ];
    },
    // 点击搜索摁扭事件
    searchAir() {
      const isValue = Object.values(this.form).every((value) => {
        if (!value) {
          this.$message.error("检查你的选择");
        }
        return value;
      });
      if (!isValue) return;
      // 将即将要查询的数据存入到vuex中
      this.$store.commit("air/pushHistory",this.form)
      console.log(this.form);
      // 构造函数 进行页面跳转
      this.$router.push({ path: "/air/flights", query: this.form});
    },
  },
};
</script>

<style lang="less" scoped>
.air_search_form {
  border: 1px solid #ccc;
  height: 100%;
  .air_search_form_title {
    height: 45px;
    display: flex;
    .air_search_form_title_item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #eee;
      .iconfont {
        margin-right: 3px;
      }
    }
    .active {
      background-color: #fff;
      position: relative;
      &::before {
        content: "";
        width: 100%;
        height: 3px;
        background-color: orange;
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }
  .air_search_form_content {
    padding: 10px 50px 10px 30px;
    position: relative;
    .exchange {
      width: 20px;
      height: 20px;
      background-color: #888;
      color: #fff;
      position: absolute;
      top: 52px;
      right: 20px;
      font-size: 14px;
      text-align: center;
      cursor: pointer;
    }
    &::before {
      content: "";
      width: 33px;
      height: 68px;
      border: 1px solid #666;
      border-left: none;
      position: absolute;
      top: 27px;
      right: 28px;
      z-index: -1;
    }
  }
  .date_picker {
    width: 100%;
  }
  .search_btn {
    width: 100%;
  }
}
</style>